Hi , 我是 Rosa Hong，這是我第一次參加鐵人賽，報名時想了很久，決定先報自我挑戰組嘗試看看。去年我開始自學前端技術，很多大神的鐵人賽的文章一直都是我的隱藏老師，在收穫滿滿之餘，也希望自己能有一天能成為鐵人賽的參加者，今年下定決心來報名。
期許自己參加不只是記錄學習，也在寫文方面能夠進步，不只是吸收者，而是成為知識的輸出者。
參賽前有想過其他主題，像是我很想學習的 Vue 、TypeScript 以及 P5.js 等等，太想學習的實在太多，考慮自己沒辦法在短期內邊學習之際又有架構的產出一系列文章，尤其自己的學習習慣很容易糾結在某個點專研，30 天反而會變成 「我只是想參加完」這樣的心態打流水仗，於是選擇預先規劃較完整的動畫為主題。
動畫一直是我覺得最為神秘的技術，能達到動畫的手法可能有 :
身為新手，也想做出網路上各種漂亮的網頁?，但 :
(特地製作了一張嘲諷自己)
當我開開心心做出一個具有功能的網頁，一直覺得好像少了什麼。同時學習框架與 JS 基礎還有一堆生態圈衍生 library 的要學，我的大腦已經超載 ，要我再加上精雕細琢的動畫，皮諾可請直接電死我。
當然 CSS Animation 基礎還是要會，這是動畫的根基。但動畫難的不是它的很難學難懂，而是要大費周章的時間處理。不能否認一項藝術創作的背後需要花費的心力與時間，所以人類才會使用工具幫助自己快速達成目標，在現代開發則透過各種套件來快速達到動畫效果，例如 : GASP 、Three.js 等等，再進一步搭配上各種框架與生態圈都衍生出一系列處理動畫的 library 。
由於前端御三家中 React 是我第一個學習的，所以我都會以 React 生態系作為出發點。
在 React Animation 相關的 library 比較多星的有 :
截至 2022 年 9 月三者下載量數據 :
framer motion 可以說是後起之秀。我第一次知道 framer motion 是從 Takuya Matsuyama 的影片 ，順便認識了 Chakra UI ，讓我對這兩個工具充滿好奇。
那 framer motion 究竟為什麼可以這麼快速竄起呢 ?
framer motion 是 Framer 跟 motion API 所組合而成，其簡介是 :
就整體來說主打 迅速跟簡單上手。
再看看 motion API 官方特色，基本上應有盡有 :
motionValue : 客製化動畫值useSpring 具有 Spring Animation在開發應用上也可以到 官方的範例 看能做到哪些效果，不只元素區塊的動畫，也包含 SVG 與 3D，不過我最常看見的是 Unmount 動畫應用在頁面轉場，轉場多重要呢 ? 可以參考今年的 Google I/O 釋出 Page Transitions 新特色。
在設計工具方面，Framer 跟 Figma 長的很像，官方也有推出 Figma + Framer 的整合工具，也就是可以在 Figma 設計到 Framer 發布/轉成 html 或展示原型。
framer motion 的崛起，我想也要歸功於勤奮更新與越來越完善的 API ，另外令我最好奇的是 官方 beta 的功能 ，就是使用 import 就能載入 framer 設計好的元件，並且可以發布到 npm，在未來或許動畫再也不是開發者的噩夢之一了。
我想再次強調 新手友善 的問題
<motion.div> 就可以開始做動畫 ，基本上會有不錯的 Spring 動畫身為新手而言，降低接觸門檻是第一步，如果連認識都很困難了，更不用談想繼續學習的動力。新手肯定遇過這個難題 : 一開始要學 React 、 Vue 還是 Angular ? 我會說，哪個試過你覺得最想繼續學就去學那個吧。
並不會特別講 React 基本概念，以下是估計會用到知識部分
目前劃分幾個主題 :
接下來一個月請多指教啦 :D
iThome鐵人賽
看影片追技術